<template>
  <div class="admin-profile-container">
    <div class="profile-header">
      <h2>管理员个人信息</h2>
    </div>

    <div class="profile-content" v-loading="loading">
      <el-card shadow="hover">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
            <el-tag type="success">管理员</el-tag>
          </div>
        </template>

        <div class="info-list" v-if="adminInfo">
          <div class="info-item">
            <span class="label">用户名：</span>
            <span class="value">{{ adminInfo.username }}</span>
          </div>
          <div class="info-item" v-if="adminInfo.name">
            <span class="label">姓名：</span>
            <span class="value">{{ adminInfo.name || '-' }}</span>
          </div>
          <div class="info-item" v-if="adminInfo.email">
            <span class="label">邮箱：</span>
            <span class="value">{{ adminInfo.email || '-' }}</span>
          </div>
          <div class="info-item" v-if="adminInfo.phone">
            <span class="label">电话：</span>
            <span class="value">{{ adminInfo.phone || '-' }}</span>
          </div>
          <div class="info-item" v-if="adminInfo.createTime">
            <span class="label">创建时间：</span>
            <span class="value">{{ adminInfo.createTime }}</span>
          </div>
          <div class="info-item" v-if="adminInfo.lastLoginTime">
            <span class="label">最后登录：</span>
            <span class="value">{{ adminInfo.lastLoginTime }}</span>
          </div>
        </div>
        <div class="empty-info" v-else>
          <el-empty description="暂无管理员信息"></el-empty>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useAdminStore } from '@/stores/admin'
import { ElMessage } from 'element-plus'

const adminStore = useAdminStore()
const loading = ref(false)
const adminInfo = ref(null)

// 获取管理员信息
const loadAdminInfo = async () => {
  loading.value = true
  try {
    await adminStore.fetchAdminInfo()
    adminInfo.value = adminStore.adminInfo
    console.log('显示的管理员信息:', adminInfo.value)
    
    if (!adminInfo.value) {
      ElMessage.warning('未获取到管理员信息，请重新登录')
    }
  } catch (error) {
    console.error('获取管理员信息失败:', error)
    ElMessage.error('获取管理员信息失败，请重新登录')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadAdminInfo()
})
</script>

<style scoped>
.admin-profile-container {
  padding: 20px;
}

.profile-header {
  margin-bottom: 20px;
}

.profile-header h2 {
  color: #303133;
  margin: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-list {
  padding: 10px 0;
}

.info-item {
  display: flex;
  margin-bottom: 15px;
  font-size: 14px;
}

.label {
  width: 100px;
  color: #606266;
  text-align: right;
  padding-right: 20px;
}

.value {
  flex: 1;
  color: #303133;
}

.empty-info {
  display: flex;
  justify-content: center;
  padding: 30px 0;
}
</style> 